<template>
	<view class="categoryContainer">
		<view class="categoryItem" v-for="(item,index) in initData.categoryModule" :key="item.index">
			<image class="categoryImg" :src="item.titlePicUrl"></image>
			<scroll-view class="scrollView" scroll-x>
				<view class="scrollItem" v-for="(s,index) in item.itemList" :key="s.id">
					<image :src="s.listPicUrl"></image>
					<text>{{s.name}}</text>
				</view>
				<view class="scrollItem more">
					查看更多
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name:"category",
		data() {
			return {
				
			};
		},
		computed:{
			...mapState({
				initData:state=>state.indexData.initData
			})
		}
	}
</script>

<style lang="stylus">
.categoryContainer
	.categoryItem
		margin-bottom 20rpx
		.categoryImg
			width  100%
			height 370rpx
		.scrollView
			display: flex
			width 100%
			white-space nowrap
			.scrollItem
				width 200rpx
				display inline-block
				margin-left 20rpx
				vertical-align top
				&.more
					background-color #eee
					line-height 200rpx
					text-align center
					margin-right 20rpx
				image
					width 200rpx
					height 200rpx
					border-radius 10rpx
				text
					width 100%
					display -webkit-box
					white-space pre-wrap
					-webkit-box-orient vertical
					-webkit-line-clamp 2
					overflow hidden
					font-size 24rpx
					
</style>